<template>
  <div class="pane">
    <div v-for="item in list" :key="item.id" class="lb">
      <img :src="item.head_portrait" class="touxiang" />
      <div class="xinxi">
        <h2>{{ item.nickname }}</h2>
        <p>
          <span>{{ $t('限额') }}：</span><img :src="moneyInfo.icon" /><span>{{ item.min_num }}-{{ item.max_num }}</span>
        </p>
      </div>
      <div class="danjia">{{ $t('单价') }}：<b>{{ item.price_usd }}</b></div>
      <div class="beizhu">
        <p>{{ $t('成交') }}：{{ item.deal_amount }}</p>
        <p>{{ $t('成交率') }}：{{ item.deal_rate }}%</p>
      </div>
      <div class="bottom">
        <div class="fangshi">
          <a v-if="item.wechat_enable === '1'"><img src="@/assets/images/weixin.png"/></a>
          <a v-if="item.alipay_enable === '1'"><img src="@/assets/images/zhifubao.png"/></a>
          <a v-if="item.card_enable === '1'"><img src="@/assets/images/xinyongka.png"/></a>
        </div>
        <nuxt-link class="buy" :to="`/otc/order-create?mid=${item.id}`">
          {{ side === 2 ? $t('卖') : $t('买') }}
        </nuxt-link>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    side: {
      type: Number,
      required: true
    },
    list: {
      type: Array,
      required: true
    }
  },
  computed: {
    ...mapGetters({
      moneyInfo: 'otc/moneyInfo'
    })
  }
}
</script>
